<template>
    <div class="app-container">
      <!-- 标题 -->
      <div class="app-title">应用</div>
  
      <!-- 台账列表 -->
      <div class="category-title">台账</div>
      <el-row :gutter="20">
        <el-col v-for="(card, index) in taizhang" :key="index" :span="6">
          <router-link :to="card.to">
            <el-card shadow="hover" class="box-card">
              <img :src="card.iconSrc" alt="Icon" class="icon" />
              <span class="green-text">{{ card.text }}</span>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
      <!-- 故障处理记录列表 -->
      <div class="category-title">故障处理</div>
      <el-row :gutter="20">
        <el-col v-for="(card, index) in GuZhangChuLi" :key="index" :span="6">
          <router-link :to="card.to">
            <el-card shadow="hover" class="box-card">
              <img :src="card.iconSrc" alt="Icon" class="icon" />
              <span class="green-text">{{ card.text }}</span>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
      <!-- 文档 -->
      <div class="category-title">知识库</div>
      <el-row :gutter="20">
        <el-col v-for="(card, index) in zhishiku" :key="index" :span="6">
          <router-link :to="card.to">
            <el-card shadow="hover" class="box-card">
              <img :src="card.iconSrc" alt="Icon" class="icon" />
              <span class="green-text">{{ card.text }}</span>
            </el-card>
          </router-link>
        </el-col>
      </el-row>

      <!-- 检修信息 -->
      <div class="category-title">检修信息（开发中）</div>
      <el-row :gutter="20">
        <el-col v-for="(card, index) in jianxiu" :key="index" :span="6">
          <router-link :to="card.to">
            <el-card shadow="hover" class="box-card">
              <img :src="card.iconSrc" alt="Icon" class="icon" />
              <span class="green-text">{{ card.text }}</span>
            </el-card>
          </router-link>
        </el-col>
      </el-row>

      <!-- 考勤列表 -->
      <div class="category-title">考勤（开发中）</div>
      <el-row :gutter="20">
        <el-col v-for="(card, index) in kaoqing" :key="index" :span="6">
          <router-link :to="card.to">
            <el-card shadow="hover" class="box-card">
              <img :src="card.iconSrc" alt="Icon" class="icon" />
              <span class="green-text">{{ card.text }}</span>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
    
  </template>
  
  <script>
  import settingsIcon from '/images/ybz.svg';
  import ybzIcon from '/images/ybz_change.svg';
  import kaoqingIcon from '/images/kaoqing_1.svg';
  import userIcon from '/images/user.svg';
  import jianxiuIcon from '/images/jianxiu.svg';
  import zhishikuIcon from '/images/zhishiku.svg';
  import yinjianIcon from '/images/yinjian.svg';
  import bangongIcon from '/images/bangong.svg';
  import GuZhangChuLi from '/images/GuZhangChuLi.svg';
  export default {
    data() {
      return {
        // 示例数据，这里你可以替换为你自己的数据源
        taizhang: [
        { iconSrc: settingsIcon, text: '运营一本账', to: { name: 'manage-ybz' } },
        { iconSrc: ybzIcon, text: '新增删除以及资源集维护', to: { name: 'manage-ybzChange' } },
        { iconSrc: yinjianIcon, text: '硬件台账', to: { name: 'manage-yjybz' } },
        { iconSrc: bangongIcon, text: '办公设备台账', to: { name: '' } },
        ],
        GuZhangChuLi: [
        { iconSrc: GuZhangChuLi, text: '故障处理记录',to: { name: 'manage-gzclybz' }},
        ],
        kaoqing: [
        { iconSrc: userIcon, text: '人员信息',to: { name: 'manage-UserInfoYbz' }},
        { iconSrc: kaoqingIcon, text: '考勤统计',to: { name: '' }},
        ],
        jianxiu: [
        { iconSrc: jianxiuIcon, text: '检修信息',to: { name: '' }},
        ],
        zhishiku: [
        { iconSrc: zhishikuIcon, text: '知识库',to: { name: 'manage-zhishiku' }},
        ],
      };
    }
  };
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  
  .app-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .category-title {
    font-size: 15px;
    color: #5e7a88;
    margin-top: 10px; /* 控制标题之间的间距 */
    margin-bottom: 5px;
  }
  
  /* 在每个分类标题后紧跟的行添加额外的顶部间距 */
  .category-title + .el-row {
    margin-top: 20px; /* 调整此值以控制标题与第一行卡片之间的间距 */
  }
  
  .el-row {
    margin-bottom: 20px; /* 确保行之间的间距 */
  }
  
  .box-card {
    height: 60px; /* 设置一个固定高度 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 0px; /* 添加内边距 */
    margin-bottom: 20px;
  }
  
  .icon {
    width: 100%; /* 设置图片宽度为卡片宽度的100% */
    height: auto; /* 保持图片的宽高比 */
    max-width: 50px; /* 设置最大宽度 */
    max-height: 50px; /* 设置最大高度 */
    object-fit: contain; /* 确保图片在调整大小时保持其原始的宽高比 */
    vertical-align: middle; /* 垂直居中对齐 */
  }
  
  .card-content {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    margin-left: 10px; /* 添加左边距 */
  }
  
  .card-content span {
    font-size: 14px; /* 设置字体大小 */
    line-height: 1.5; /* 设置行高 */
  }
  </style>